<template>
  <div>
    <!-- Header -->
      <mt-header
        title="火热头条"
        style="
          background-color: rgb(248, 62, 62);
          font-size:20px;
          font-family: Georgia;
        ">
        <router-link to="/" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
      </mt-header>
      <div class="news">
        <div class="title">
          <span>{{detail.devent}}</span>
          <h2>{{detail.dtitle}}</h2>
          <div style="font-size:14px;color:#999">{{detail.dtime}}</div>
        </div>
        <div class="content">
          <img :src="'http://127.0.0.1:3000'+`${detail.dphoto}`" alt="">
          <span>{{detail.dthing}}</span>
          <p class="p1">{{detail.dtou}}</p>
          <div class="details" v-html="detail.details">
          </div>
        </div>
      </div>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      detail:{},
    }
  },
  mounted() {
    let id = this.$route.query.did;
    axios.get(`/details?did=${id}`).then(result=>{
      this.detail=result.data.results[0];
    })
  },
}
</script>
<style scoped>
.news{
  width: 95%;
  margin: auto;
  /* background-color: darkorchid; */
}
.title{
  width: 90%;
  margin: auto;
  /* background-color: darkgray; */
  position: relative;
}
.title span{
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: darkgoldenrod;
  position: absolute;
  left: 5%;
}
.title h2{
  text-align: left;
  padding-top: 30px;
  margin: 0px 0px 0px 5%;
}
.content{
  margin-top: 15px;
}
.content img{
  width: 100%;
  box-shadow:6px 4px 7px #777474, -1px 0px 7px #666464;

}
.content span{
  display: inline-block;
  width: 90%;
  text-align: left;
  font-size: 12px;
  color: rgb(155, 153, 151);
}
.content .p1{
  font-size: 20px;
  text-align: left;
  font-weight: 600;
  margin-left: 2%;
}
.details{
  text-align: left;
  border-left: 2px solid #999;
  padding-left: 20px;
  text-indent: 35px;
}
.details >>> p{
  margin-top: -15px;
}
</style>